import { Button, Col, Form, Input, Row, Space, theme } from 'antd';
import React from 'react';

import { hasPermission } from '@/utils/permission';

import { SearchFormProps } from '#/entity';
import { BasicStatus } from '#/enum';

export interface SearchForm {
  page: number;
  take: number;
  name?: string;
  code?: string;
  status?: BasicStatus;
}

export default function PositionSearchForm({ onOk, onReset }: SearchFormProps) {
  const { token } = theme.useToken();
  const [form] = Form.useForm();

  const formStyle: React.CSSProperties = {
    maxWidth: 'none',
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    padding: 24,
  };

  const onFinish = (values: any) => {
    onOk(values);
  };
  const onFormReset = () => {
    form.resetFields();
    onReset();
  };

  return (
    <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item name="name" label="岗位名称">
            <Input placeholder="请输入名称" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item name="code" label="岗位编码">
            <Input placeholder="请输入编码" />
          </Form.Item>
        </Col>
      </Row>
      <div style={{ textAlign: 'right' }}>
        {hasPermission('DEPARTMENT:POSITION:READ') && (
          <Space size="small">
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={onFormReset}>重置</Button>
          </Space>
        )}
      </div>
    </Form>
  );
}
